<!-- 模板 -->
<template>
  <div class="foot">
    <div
      class="foot-item"
      v-for="(item, index) in list"
      :key="index"
      @click="activeItme(index)"
    >
      <img :src="item.activeSrc" alt="" v-if="item.active" />
      <img :src="item.src" alt="" v-else />
      <div :class="item.active ? 'red' : ''">{{ item.text }}</div>
    </div>
  </div>
</template>

<script>
import pic1 from '@/assets/img/1.png'
import pic2 from '@/assets/img/2.png'
import pic3 from '@/assets/img/3.png'
import pic4 from '@/assets/img/4.png'
import pic5 from '@/assets/img/5.png'
import pic6 from '@/assets/img/6.png'
import pic7 from '@/assets/img/7.png'
import pic8 from '@/assets/img/8.png'
import pic9 from '@/assets/img/9.png'
import pic10 from '@/assets/img/10.png'
export default {
  name: '',
  data() {
    return {
      list: [
        { id: 1, text: '首页', src: pic1, activeSrc: pic6, active: true },
        { id: 2, text: '搜索', src: pic2, activeSrc: pic7, active: false },
        { id: 3, text: '热点', src: pic3, activeSrc: pic8, active: false },
        { id: 4, text: '购物', src: pic4, activeSrc: pic9, active: false },
        { id: 5, text: '我的', src: pic5, activeSrc: pic10, active: false }
      ]
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    activeItme(index) {
      let list = this.list
      list.forEach((item, i) => {
        item.active = false
        if (index === i) {
          item.active = true
        }
      })
    }
  },
  created() {},
  mounted() {}
}
</script>

<style lang="less" scoped>
.foot {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  .foot-item {
    width: 100%;
    text-align: center;
    img {
      width: 0.7rem;
    }
    div {
      font-size: 0.32rem;
      color: #a7a7a7;
      &.red {
        color: #df2a41;
      }
    }
  }
}
</style>
